<script setup>
import { toRefs, computed } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElIcon, ElImage, ElScrollbar, ElTabPane, ElTabs, ElText } from 'element-plus';

const props = defineProps({
  info: {
    type: Object,
  },
});
const { info } = toRefs(props);
const emit = defineEmits(['handleQueryClose']);

const activeName = computed(() => {
  return info.value.length ? '0' : '';
});

const resultInfo = computed(() => {
  return info.value;
});

const handleCloseQueryLayer = () => {
  emit('handleQueryClose');
};
</script>
<template>
  <div class="map-result-info-query">
    <header>
      <ElIcon class="root_icon_close" @click="handleCloseQueryLayer">
        <CloseBold />
      </ElIcon>
    </header>

    <main class="mt-10px max-h-840px min-h-540px p-20px">
      <ElScrollbar>
        <ElTabs v-model="activeName" class="demo-tabs">
          <ElTabPane v-for="(item, index) in resultInfo" :key="index" :name="`${index}`">
            <template #label>
              <span class="custom-tabs-label">
                <span>{{ item?.properties?.name }}</span>
              </span>
            </template>

            <div>
              <ElImage
                style="width: 100%; height: 200px"
                :src="item?.properties?.image"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[item?.properties?.image]"
                :initial-index="0"
                fit="cover"
              />

              <div class="mt-20px">
                <ElText line-clamp="20">
                  <div class="leading-6 text-#fff">
                    濒危物种信息
                    <br />
                    物种名称: 秦岭大熊猫 (Ailuropoda melanoleuca qinlingensis)<br />
                    保护级别: 国家一级保护动物 <br />
                    栖息地: 秦岭山脉 数量: 约300只 <br />
                    主要威胁: 栖息地丧失、非法狩猎、气候变化 <br />保护区信息<br />
                    保护区名称: 陕西佛坪国家级自然保护区 <br />位置: 陕西省佛坪县<br />
                    主要保护对象: 大熊猫、金丝猴、羚牛 <br />面积: 约350平方公里 <br />成立时间: 1978年 非法交易记录
                  </div>
                </ElText>
              </div>
            </div>
          </ElTabPane>
        </ElTabs>
      </ElScrollbar>
    </main>
  </div>
</template>

<style scoped lang="scss">
.map-result-info-query {
  position: fixed;
  top: 5%;
  left: 10px;
  width: 480px;
  min-height: 412px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  box-shadow: 0px 0px 0.9px rgba(0, 0, 0, 0.02), 0px 0px 2.1px rgba(0, 0, 0, 0.028), 0px 0px 3.9px rgba(0, 0, 0, 0.035),
    0px 0px 6.9px rgba(0, 0, 0, 0.042), 0px 0px 13px rgba(0, 0, 0, 0.05), 0px 0px 31px rgba(0, 0, 0, 0.07);

  header {
    position: relative;
    display: flex;
    justify-content: flex-end;
    height: 27px;
    padding: 10px 6px 0 8px;
    border-radius: 6px;

    .root_icon_close {
      position: relative;
      top: -5px;
      right: 17px;
      width: 20px;
      color: #ffffff;
      font-size: 20px !important;
      cursor: pointer;
      :hover {
        color: #108e90;
      }
    }
  }

  main {
  }
}
</style>
